<template>
  <div class="pane">
    <ul class="biaotou">
      <li class="left">{{ $t('名称') }}</li>
      <li class="mid">{{ $t('最新价') }}</li>
      <li class="right">{{ $t('涨跌幅') }}</li>
    </ul>
    <nuxt-link v-for="key in rank" :key="key" :to="`/kline?symbol=${key}`">
      <ul class="xinxi">
        <li class="left">
          <p><strong>{{ coinPairInfo[key].stock }}</strong>/{{ coinPairInfo[key].money }}</p>
          <p>24H {{ realTimeQuotes[key].deal | formatSize() }}</p>
        </li>
        <li class="mid">
          <p>
            <strong>{{ realTimeQuotes[key].last | priceFormat(coinPairInfo[key].decimals) }}</strong>
          </p>
          <p>≈{{ currency.symbol }}{{ key | currencyPrice('last') | numberFormat(4) }}</p>
        </li>
        <li v-if="realTimeQuotes[key].last < realTimeQuotes[key].open" class="right">
          <span class="die">{{ realTimeQuotes[key] | fluctuation() }}</span>
        </li>
        <li v-else class="right">
          <span>{{ realTimeQuotes[key] | fluctuation() }}</span>
        </li>
      </ul>
    </nuxt-link>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      currency: ({ currency }) => currency,
      realTimeQuotes: ({ market }) => market.realTimeQuotes,
      coinPairInfo: ({ market }) => market.coinPairInfo,
      rank: ({ market }) => market.downRank
    })
  }
}
</script>
<style scoped>
.pane {
  background-color: #fff;
  display: block;
}
.pane .biaotou {
  width: 98%;
  padding: 0 1%;
  float: left;
}
.pane .biaotou li {
  width: 32.66%;
  float: left;
  line-height: 40px;
  color: #666;
}
.pane .biaotou .mid {
  text-align: center;
}
.pane .biaotou .right {
  text-align: right;
}
.pane .xinxi {
  width: 98%;
  padding: 1% 1%;
  float: left;
  border-bottom: 1px solid #f3f3f3;
}
.pane .xinxi li {
  width: 32.66%;
  float: left;
  padding: 5px 0;
}
.pane .xinxi li .die {
  background: #d14b64;
}
.pane .xinxi li p {
  width: 100%;
  line-height: 20px;
}
.pane .xinxi li p strong {
  color: #173e5d;
  font-size: 16px;
}
.pane .xinxi .mid {
  text-align: center;
}
.pane .xinxi li span {
  width: 70px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
  background: #03ac8f;
  float: right;
  margin: 5px 0 0 0;
}
</style>
